Day 6 - Composition API 及 Option API 是什麼？以及差別是？ - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 7

Vue.js

新手也看得懂的 Vue.JS 前端系列第 7 篇

Day 6 - Composition API 及 Option API 是什麼？以及差別是？

17th鐵人賽 vue學習筆記新手

TershiXia

2025-09-21 22:32:31

68 瀏覽

分享至

上一篇我們聊到了 Component，也做了一個小小的卡片。今天我們就要來講一個常常會讓新手有點混亂的東西，那就是 Composition API 跟 Options API。其實這兩個東西，開發者可以把它想像成是「兩種不同的寫法」。結果都是 Vue 的程式碼，跑出來的網頁也一樣能動，只是邏輯的拆分方式跟開發的習慣會不太相同。

Option API 是什麼？

在 Vue2 的時候，大家主要都是用 Option API 來寫程式的。它的特點就是「把東西按照類別分開」，例如要定義資料，就寫在 data 裡；要定義方法，就寫在 methods 裡；要算一些衍生資料，就寫在 computed 裡。

有點像是一間大公司，會計部門就是算錢、人資部門處理人事、業務部門出去跑業績，分工很清楚。開發者如果要找某一個功能，就要先知道它在哪個部門（區塊）。

我們看一個小例子，假設要做一個簡單的計數器：

<script lang="ts">
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count++
    }
  }
}
</script>

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="add">加一</button>
  </div>
</template>

這種寫法就是很典型的 Options API。可以看到我們把「資料（count）」跟「方法（add）」分開放在不同的區塊裡面，然後再透過 template 去呼叫它。

Composition API 是什麼？

到了 Vue3，官方推出了另一種寫法，就是 Composition API。這種寫法的特色是「把相關的邏輯集中在一起」，不像 Options API 那樣硬要拆成好幾個地方。

你可以把它想像成一個新創公司，大家坐在同一張桌子上，開發者想要資料跟方法都放在一起，方便直接使用，不用再到不同部門跑來跑去。

同樣的計數器，如果用 Composition API 來寫，會長這樣：

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)

const add = () => {
  count.value++
}
</script>

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="add">加一</button>
  </div>
</template>

在這裡，count 跟 add 就寫在同一個區域裡面，開發者一眼就能知道它們彼此是有關聯的。

差別到底在哪？

所以差別到底是什麼呢？其實就是「程式邏輯要不要分散」。

Options API 比較像是分類清楚，讀者一看就知道東西在哪裡，但有時候一個功能的程式碼會散落在 data、methods、computed 三個地方。
Composition API 則是可以把相關的程式碼放在一起，尤其是當專案越來越大時，這種集中邏輯的寫法會讓程式更好維護。

什麼時候用誰比較好？

如果讀者現在還在新手階段，想要快速上手，Options API 會比較直覺，因為它的格式是固定的，開發者只要按照「規則」去寫就好。
但如果讀者開始寫比較大的專案，或是要跟其他人合作，那 Composition API 會比較有彈性，因為可以很快把程式拆出去寫成一個一個 function（我們叫它 composable），讓專案更乾淨。

其實 Vue 官方也說了，這兩種寫法是可以共存的，開發者不用糾結一定要選哪一個。只要讀者習慣就好，甚至一個專案裡面混著寫也完全沒問題。

小小練習：Counter.vue

題目：請讀者做一個計數器，初始值是 0，按下按鈕會加 1。請用 Options API 和 Composition API 各寫一次，看看差別。

Options API 寫法

<script lang="ts">
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count++
    }
  }
}
</script>

<template>
  <div>
    <p>目前的數字是：{{ count }}</p>
    <button @click="add">加一</button>
  </div>
</template>

<style scoped>
button {
  padding: 6px 12px;
  margin-top: 8px;
}
</style>

這邊我們把 count 放在 data()，把 add() 放在 methods，所以邏輯是分開寫的。

Composition API 寫法

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)

const add = () => {
  count.value++
}
</script>

<template>
  <div>
    <p>目前的數字是：{{ count }}</p>
    <button @click="add">加一</button>
  </div>
</template>

<style scoped>
button {
  padding: 6px 12px;
  margin-top: 8px;
}
</style>

這裡我們直接用 ref 定義一個變數 count，再定義一個方法 add，然後全部放在 <script setup> 裡面。可以看到邏輯跟資料是綁在一起的，比較集中。

所以兩種寫法跑出來的效果是一模一樣的，只是寫法的差異。讀者實際跑過一次，就會更直觀地感受到「Options API 是分部門，Composition API 是大家坐一桌」。